<template>
  <PublicPage class="focus_list" page-name="我的关注" :borderType="true" :showNav="true">
    <div class="fans_msg_box">
      <!-- 搜索 -->
      <SearchInput placeholder="搜索昵称" @searchFn="searchOrderInputFn" v-if="searchInputType"/>

      <scroll-view
        :class="!searchInputType?'layout_con_box_two':'layout_con_box'"
        :refresher-enabled="refresherType"
        @refresherrefresh="scrolltoupperFn"
        :refresher-triggered="refresherTriggered"
        scroll-y="true"
        @scrolltolower="scrolltolowerFn"
        -webkit-overflow-scrolling="touch"
        scroll-with-animation="true"
      >
        <view class="meFocus" v-if="focusOnList.length>0">
          <view class="meFocus_list" v-for="(item, index) in focusOnList" :key="index" @click.stop="goHomePage(item)">
            <view class="list_img">
              <image class="avatar_box" mode="aspectFill" :src="item.communityLogo || 'https://image.qqpyyds.com/mpAppImg/icon/avatar2_icon.png'" />
            </view>
            <view class="list_text">
              <view class="list_name">{{item.communityName}}</view>
              <view class="list_fans">成员{{playvolumeFn(item.memberCount || item.fansCount)}}  跟团人次{{playvolumeFn(item.followGroupCount)}}</view>
            </view>
          </view>
          <div class="notData_box" v-if="notDataType">沒有更多数据了~</div>
        </view>
        <view class="adapter_list" v-if="noDataPageType">
          <view class="flex-col items-center order-default">
            <image
              src="https://image.qqpyyds.com/mpAppImg/noneImg/search_default_img.png"
              class="order-default-image"
              mode="aspectFill"
            />
            <text class="order-default-text">暂时还没关注任何人～</text>
          </view>
        </view>
      </scroll-view>
    </div>
  </PublicPage>
</template>

<script>
import dynamic from "@/api/dynamic.js";
import PublicPage from "@/components/publicPage/index.vue";
import SearchInput from "@/components/searchInput/index.vue";
import Util from "@/api/util.js";

export default {
  name: "meFocus",
  components: {
    PublicPage,
    SearchInput
  },
  data() {
    return {
      searchText: "搜索已关注的人",
      focusOnList: [], // 关注列表
      currentPage: 1,
      nickname: '',
      pageSize: 20,
      followStatus: 0,
      notDataType: false,
      searchInputType: true,
      noDataPageType: false,
      refresherType: true,
      refresherTriggered: false,
    };
  },
  onLoad() {
  },
  computed: {
    globalData () {
      return this.$store.state.globalData
    },
  },
  onShow () {
    this.searchOrderInputFn()
  },
  methods: {
    // 跳转去用户主页
    goHomePage(item){
      this.navigateTo({url: `/pagesB/personalCenter/homePage?accountId=${item.accountId}`});
    },
    searchOrderInputFn (e) {
      this.nickname = e
      this.focusOnList = []
      this.currentPage = 1
      this.getFollowList()
    },
    playvolumeFn (mun) {
      return Util.playvolume(mun)
    },
    scrolltoupperFn(){
      this.refresherTriggered = true
      this.notDataType = false
      this.focusOnList = []
      this.currentPage = 1
      this.getFollowList()
    },
    scrolltolowerFn () {
      if (this.notDataType) return
      ++this.currentPage
      this.getFollowList()
    },
    async getFollowList () {
      let params = {
        currentPage: this.currentPage,
        nickname: this.nickname,
        pageSize: this.pageSize
      }
      await dynamic.getFollowList(params).then(res => {
        // console.log(res, '已关注列表');
        if (res.code === 200) {
          if (res.data.records.length>0) {
            if (this.focusOnList.length>0) {
              this.focusOnList = this.focusOnList.concat(res.data.records)
            } else {
              this.focusOnList = res.data.records
            }
          }
          if (!this.nickname&&this.focusOnList.length<1) {
            this.searchInputType = false
          }
          if (res.data.records.length<this.pageSize) {
            this.notDataType = true
          } else {
            this.notDataType = false
          }
          this.noDataPageType = this.focusOnList.length>0?false:true
        } else {
          this.noDataPageType = true
        }
        this.refresherTriggered = false
      })
    },
    // 关注or取消关注
    focusClick(index) {
      console.log('item'+'index'+index);
      if (index === 0) {
        this.followStatus = 0
      } else {
        this.followStatus = 1
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.focus_list {
  height: 100vh;
  background: #f2f3f5;
}
.fans_msg_box {
  height: 100%;
  .layout_con_box {
    height: calc(100% - 100rpx);
  }
  .layout_con_box_two {
    height: 100%;
  }
}
// 我的关注列表
.meFocus_list {
  height: 140rpx;
  background: #fff;
  display: flex;
  align-items: center;
  padding: 24rpx 32rpx;
  // border-bottom: 2rpx solid #eee;
  // 头像
  .list_img {
    margin-right: 16rpx;
    width: 96rpx;
    height: 96rpx;
    // background: pink;
    .avatar_box {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
  // 名字
  .list_text {
    flex: 1;
    height: 100%;
    display:flex;
    flex-flow: column; //垂直排列
    justify-content: space-between;//两端对齐
    font-size: 28rpx;
    .list_fans {
      color: rgba(0, 0, 0, 0.6);
      font-size: 24rpx;
    }
  }
  // 关注
  .list_but {
    width: 122rpx;
    display: flex;
    align-items: center;
  }
  // 已关注的博主
  .disabled-but {
    background-color: #ffe5de;
    color: #fff;
    padding: 4rpx 20rpx;
    margin: 0;
  }
}

.adapter_list {
  height: 100%;
}
// 搜索框
.order-main3 {
  z-index: 193;
  height: 112rpx;
  background-color: rgba(255, 255, 255, 1);
  border: 2rpx solid #eee;
  width: 750rpx;
  justify-content: center;
  align-items: flex-start;
  padding-left: 24rpx;
  display: flex;
  flex-direction: column;
}
.order-group1 {
  z-index: auto;
  width: 694rpx;
  height: 80rpx;
  flex-direction: row;
  display: flex;
  align-items: center;
  .order-search-bg {
    background: #f5f5f5;
    display: flex;
    width: 100%;
    height: 80rpx;
    border-radius: 8rpx;
    align-items: center;
    .order-search-icon {
      background: url("https://image.qqpyyds.com/mpAppImg/icon/search1_icon.png") 0rpx 0rpx no-repeat;
      width: 48rpx;
      height: 48rpx;
      margin: 0 20rpx;
    }
    .order-search-input {
      width: 90%;
    }
  }
  .order-search-text {
    width: 120rpx;
    font-size: 32rpx;
    color: #e44435;
    text-align: center;
  }
}
.notData_box {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24rpx;
  padding: 20rpx 0;
  color: #969799;
}
</style>